<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>asas</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="<?php echo $_['scripts_url']; ?>reset.css">
  <link rel="stylesheet" href="<?php echo $_['theme_url']; ?>scripts/style.css">
  <!--[if lt IE 9]>
  <script src="<?php echo $_['scripts_url']; ?>html5shiv.js"></script>
  <![endif]-->
  <!--[if lte IE 7]>
  <style>
    ul.lnav li a { width: 184px; }
  </style>
  <![endif]-->
</head>
<body>
  <div class="container">
    <div class="left-sidebar">
      <ul class="lnav">
        <li><a href="javascript:void(0);" onclick="load_abc();">load abc</a></li>
        <li><a href="javascript:void(0);" onclick="load_table();">load table</a></li>
      </ul>
    </div>
    <div id="main-container" class="main-container">
    
    </div>
  </div>
  
<script type="text/javascript" src="<?php echo $_['scripts_url']; ?>json_sans_eval.js"></script>
<script type="text/javascript">

function load_abc() {
  document.getElementById("main-container").innerHTML = 'Cái gì đó';
}

function load_table() {
  sendRequest(
    'data.php?t='+Math.random(), 
    function(req) {
      var str = req.responseText;
      var obj = jsonParse(str);
      var html = '';
      html += '<table class="tb-list" width="100%">\n';
      html += '  <thead>\n';
      html += '    <tr>\n';
      html += '      <th>Name</th>\n';
      html += '      <th>Age</th>\n';
      html += '      <th>Address</th>\n';
      html += '      <th>action</th>\n';
      html += '    </tr>\n';
      html += '  </thead>\n';
      html += '  <tbody>\n';
      for (var k in obj) {
        html += '    <tr>';
        html += '      <td>'+obj[k].name+'</td>\n';
        html += '      <td>'+obj[k].age+'</td>\n';
        html += '      <td>'+obj[k].add+'</td>\n';
        html += '      <td>[<a href="javascript:void(0);" data-id="'+k+'" onclick="edit(this);">edit</a>] [<a href="javascript:void(0);" onclick="del();">delete</a>]</td>\n';
        html += '    </tr>\n';
      }
      html += '  </tbody>\n';
      html += '</table>\n';
      $("main-container").innerHTML = '<div id="table-list">'+html+'</div>';
    }
  ); // end Requet
}
window.onload = function() {

}

function $(id) {
  return document.getElementById(id);
}

function edit($this) {
  var id = $this.getAttribute('data-id');
  alert('edit:'+id);
  
}

function del() {
  alert('del');
}

/* XMLHTTP */

function sendRequest(url,callback,postData) {
  var req = createXMLHTTPObject();
  if (!req) return;
  var method = (postData) ? "POST" : "GET";
  req.open(method,url,true);
  req.setRequestHeader('User-Agent','XMLHTTP/1.0');
  //req.page = url;
  if (postData)
    req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  req.onreadystatechange = function () {
    if (req.readyState != 4) return;
    if (req.status != 200 && req.status != 304) {
    //  alert('HTTP error ' + req.status);
      return;
    }
    callback(req);
  }
  if (req.readyState == 4) return;
  req.send(postData);
}

function XMLHttpFactories() {
  return [
    function () {return new XMLHttpRequest()},
    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
  ];
}

function createXMLHTTPObject() {
  var xmlhttp = false;
  var factories = XMLHttpFactories();
  for (var i=0;i<factories.length;i++) {
    try {
      xmlhttp = factories[i]();
    }
    catch (e) {
      continue;
    }
    break;
  }
  return xmlhttp;
}


</script>
</body>
</html>